<template>
  <div>
    <el-form :model="form" :rules="dataRule" ref="dataForm" label-width="100px" size="small">
      <el-tabs v-model="activeName" @tab-click="handleClickBasic">
        <el-tab-pane label="基本信息" name="first">
          <el-row type="flex" justify="left">
            <el-col :span="12">
              <!--            <el-form-item label="服务URL" prop="servUrl">-->
              <!--              <el-input v-model="form.servUrl"></el-input>-->
              <!--            </el-form-item>-->
              <el-form-item label="服务名称" prop="servName">
                <el-input v-model="form.servName"></el-input>
              </el-form-item>
              <el-form-item label="服务描述">
                <el-input type="textarea" v-model="form.servDescribe"></el-input>
              </el-form-item>
              <el-form-item label="联系人">
                <el-input v-model="form.servUser"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.servPhone"></el-input>
              </el-form-item>
              <el-form-item label="联系邮箱">
                <el-input v-model="form.servEmail"></el-input>
              </el-form-item>
              <el-form-item label="联系人地址">
                <el-input v-model="form.servAddress"></el-input>
              </el-form-item>
              <el-form-item label="关键词">
                <el-tag
                    :key="tag"
                    v-for="tag in form.servKeyword"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                  {{ tag }}
                </el-tag>
                <el-input
                    class="input-new-tag"
                    v-if="form.inputVisible"
                    v-model="form.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 关键词</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="可见方式" prop="servLimit">
                <el-select v-model="form.servLimit" @change="visibleWayChange" placeholder="可见方式">
                  <el-option v-for="item of openMode" :label="item['dictValue']" :value="item['dictKey']"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="地图范围">
                <el-select v-model="form.servRange" placeholder="地图范围">
                  <el-option v-for="item of coverage" :label="item['dictValue']" :value="item['dictKey']"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="坐标系">
                <el-select v-model="form.servCoordinate" placeholder="地图坐标系">
                  <el-option v-for="item of mapCsys" :label="item['dictValue']" :value="item['dictKey']"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="比例尺">
                <el-input v-model="form.servRatio"></el-input>
              </el-form-item>
              <el-form-item label="高程">
                <el-input v-model="form.servAltitude"></el-input>
              </el-form-item>
              <el-form-item label="上传预览图片">
                <el-upload
                    class="upload-demo"
                    :headers="form.headers"
                    :action="form.upload_img.uploadUrl"
                    :before-upload="beforeUploadHandle_img"
                    :multiple="false"
                    :limit="1"
                    :on-success="successHandle_img"
                    :file-list="form.upload_img.fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="详细信息" name="second">
          <el-tabs v-model="activeNameSecond" type="card" @tab-click="handleClick">
            <el-tab-pane label="新增图层" name="add">
              <el-row type="flex" justify="left">
                <el-col :span="10">
                  <el-form-item label="选择目录">
                    <el-select v-model="form.servSpecial" placeholder="选择目录">
                      <el-option
                          v-for="item in form.catalogueData"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="实体形成时间">
                    <el-date-picker type="year"
                                    placeholder="选择日期"
                                    v-model="form.servEntityCreated"
                                    value-format="yyyy-MM-dd">

                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="实体消失时间">
                    <el-date-picker type="year"
                                    placeholder="选择日期"
                                    v-model="form.servEntityDestroy"
                                    value-format="yyyy-MM-dd">

                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="数据生成时间">
                    <el-date-picker type="year"
                                    placeholder="选择日期"
                                    v-model="form.servDataCreated"
                                    value-format="yyyy-MM-dd">

                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="数据更新时间">
                    <el-date-picker type="year"
                                    placeholder="选择日期"
                                    v-model="form.servDataUpdate"
                                    value-format="yyyy-MM-dd">

                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="自定义图标">
                    <span class="show-svg-icon">
                      <svg v-if="''!==form.iconUrl" class="icon svg-icon" aria-hidden="true">
                        <use :href="form.iconUrl"></use>
                      </svg>
                    </span>
                    <el-button @click="showIconDialog = true">选择图标</el-button>
                  </el-form-item>
                  <el-form-item label="空间数据类型">
                    <el-radio-group v-model="form.servDataType">
                      <el-radio v-for="item of dataType" :label="item['dictKey']">{{ item['dictValue'] }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="导入空间数据">
                    <el-upload
                        class="upload-demo"
                        ref="upload_sd"
                        :data="{'type':'2','dataType':form.servDataType}"
                        :headers="form.headers"
                        :action="form.upload_sd.uploadUrl"
                        :before-upload="beforeUploadHandle_sd"
                        :on-success="successHandle_sd"
                        :file-list="form.upload_sd.fileList"
                        :auto-upload="false">
                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload_sd">确认导入
                      </el-button>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="">
                    <el-button type="success" @click="yulan">预览</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <div id="cesiumDiv_1" style="width: 80%;height: 500px;"></div>
                </el-col>
              </el-row>
            </el-tab-pane>

            <!--            <el-tab-pane label="追加历史数据" name="addTo">-->
            <!--              <el-row type="flex" justify="left">-->
            <!--                <el-col :span="12">-->
            <!--                  <el-form-item label="选择图层">-->
            <!--                    <el-cascader-->
            <!--                        :options="form.catalogueData"-->
            <!--                        :props="form.coverageProps"-->
            <!--                        @change="handleChangeTc"></el-cascader>-->
            <!--                  </el-form-item>-->
            <!--                  <el-form-item label="数据更新时间">-->
            <!--                    <el-date-picker type="date" placeholder="选择日期" v-model="form.servDataUpdate"></el-date-picker>-->
            <!--                  </el-form-item>-->
            <!--                  <el-form-item label="导入空间数据">-->
            <!--                    <el-upload-->
            <!--                        class="upload-demo"-->
            <!--                        ref="upload_zj"-->
            <!--                        :headers="form.headers"-->
            <!--                        :action="form.upload_zj.uploadUrl"-->
            <!--                        :before-upload="beforeUploadHandle_zj"-->
            <!--                        :on-success="successHandle_zj"-->
            <!--                        :file-list="form.upload_zj.fileList"-->
            <!--                        :auto-upload="false">-->
            <!--                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
            <!--                      <el-button style="margin-left: 10px;" type="primary">数据校验</el-button>-->
            <!--                      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload_zj">确认导入-->
            <!--                      </el-button>-->
            <!--                    </el-upload>-->
            <!--                  </el-form-item>-->
            <!--                  <el-form-item label="历史版本">-->
            <!--                    <el-input v-model="form.servEdition"></el-input>-->
            <!--                  </el-form-item>-->
            <!--                  <el-form-item label="">-->
            <!--                    <el-button type="primary">确认发布</el-button>-->
            <!--                    <el-button type="success">取消发布</el-button>-->
            <!--                    <el-button type="success">预览</el-button>-->
            <!--                  </el-form-item>-->
            <!--                </el-col>-->
            <!--                <el-col :span="12">-->
            <!--                  <div id="cesiumDiv_2" style="width: 900px;height: 600px"></div>-->
            <!--                </el-col>-->
            <!--              </el-row>-->
            <!--            </el-tab-pane>-->
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="使用帮助" name="third">
          <el-form-item label="上传文档">
            <el-upload
                class="upload-demo"
                ref="upload_wd"
                :headers="form.headers"
                :action="form.upload_wd.uploadUrl"
                :before-upload="beforeUploadHandle_wd"
                :multiple="false"
                :limit="1"
                :on-success="successHandle_wd"
                :file-list="form.upload_wd.fileList"
                :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload_wd">确认导入
              </el-button>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit" :disabled="submitStatus">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @setVisibleRange="setVisibleRange"></add-or-update>


    <el-dialog
        title="选择图标"
        :visible.sync="showIconDialog"
        width="50%">
      <sel-icon v-model="form.iconUrl"></sel-icon>
      <template #footer>
        <el-button type="primary" @click="showIconDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import $axios from '@/network'
import AddOrUpdate from './ServiceManageAuthorization'
import {roleList} from '@/api/operations-center/role'

import {catalogueByParentIdService} from '@/api/electronic-map/electronic-map-service'


import SelIcon from './SelIcon'
import {queryDictList} from "@/api/basics";

let viewer_1 = null;
let viewer_2 = null;

export default {
  name: "DataServiceCreate",
  data() {
    return {
      openMode: [],
      coverage: [],
      mapCsys: [],
      dataType: [],
      submitStatus: false,
      showIconDialog: false,
      activeName: 'first',//tab页
      activeNameSecond: 'add',//tab页
      addOrUpdateVisible: false,
      form: {
        servUrl: this.$mapUrl + '/earthview/rest/services/vectorserver/wms',//服务URL
        iconUrl: '',// 图标地址
        servName: '',//服务名称
        servDescribe: '',//服务描述
        servUnit: '',//发布单位
        servUser: '',//联系人
        servPhone: '',//联系电话
        servEmail: '',//联系邮箱
        servAddress: '',//联系人地址
        servKeyword: [],//关键词
        inputVisible: false,//关键词附加
        inputValue: '',//关键词附加
        servLimit: '',//可见方式
        roleNameList: '',//显示角色名称
        roleIdList: [],//提交角色id
        servRange: '',//地图范围
        servCoordinate: '',//坐标系
        servRatio: '',//比例尺
        servAltitude: '',//高程
        servImg: '',//预览图
        servAdd: '',//是否新增/追加
        servSpecial: '',//选择目录
        servCoverage: '',//选择图层
        servDataType: '',//空间数据类型
        servEntityCreated: '',//实体形成时间
        servEntityDestroy: '',//实体消失时间
        servDataCreated: '',//数据生成时间
        servDataUpdate: '',//数据更新时间
        servDataUrl: '',//空间数据
        servPlan: '',//发布方案
        servEdition: '',//历史版本
        servApi: '',//文档地址
        catalogueData: [],//查询到的目录下拉框
        coverageProps: {
          value: 'id',
          label: 'name',
          children: 'catalogueVos'
        },
        upload_sd: {
          uploadUrl: process.env.VUE_APP_API_URL + 'data/upload/kjsj',
          num: 0,
          successNum: 0,
          fileList: [],
          downLoadPath: '',
          fileName: '',
          savePath: ''
        },
        upload_wd: {
          uploadUrl: process.env.VUE_APP_API_URL + 'data/upload/upload',
          num: 0,
          successNum: 0,
          fileList: []
        },
        upload_img: {
          uploadUrl: process.env.VUE_APP_API_URL + 'data/upload/upload',
          num: 0,
          successNum: 0,
          fileList: []
        },
        upload_zj: {
          uploadUrl: process.env.VUE_APP_API_URL + 'data/upload/kjsj',
          num: 0,
          successNum: 0,
          fileList: []
        },
        headers: {
          source: process.env.VUE_APP_API_SOURCE,
          Authorization: this.$store.state.Authentication.access_token
        }
      },
      dataRule: {
        servUrl: [
          {required: true, message: '服务URL不能为空', trigger: 'blur'}
        ],
        servName: [
          {required: true, message: '服务名称不能为空', trigger: 'blur'}
        ],
        servLimit: [
          {required: true, message: '可见方式不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  mounted() {
    if ('' === this.$store.state.Authentication.access_token) {
      this.$router.push({
        path: '/login',
        query: {
          t: Date.now(),
          furi: encodeURI(this.$route.path)
        }
      })
    } else {
      this.getDict();
      this.findCatalogue();
    }
  },
  components: {
    AddOrUpdate,
    SelIcon
  },
  methods: {
    /**
     * {获取字典常量}
     *
     * @author: 宋康
     * @date: 2022/10/19 14:55
     */
    getDict() {
      queryDictList(['OPEN_MODE', 'COVERAGE', 'MAP_CSYS', 'DATA_DATA_TYPE']).then(res => {
        if (res.status) {
          const data = res.data;
          this.openMode = data['OPEN_MODE'];
          this.coverage = data['COVERAGE'];
          this.mapCsys = data['MAP_CSYS'];
          this.dataType = data['DATA_DATA_TYPE']
        }
      })
    },
    /**
     * 创建服务
     */
    dataFormSubmit() {
      let form = this.form;
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          this.$message({
            message: '请检查数据格式是否正确',
            type: 'warning'
          });
          return false;
        }
        //
        this.submitStatus = true;
        //
        $axios({
          url: '/data/dataService/save',
          method: 'POST',
          data: {
            'servUrl': form.servUrl,
            'servName': form.servName,
            'servDescribe': form.servDescribe,
            'servUnit': form.servUnit,
            'servUser': form.servUser,
            'servPhone': form.servPhone,
            'servEmail': form.servEmail,
            'servAddress': form.servAddress,
            'servKeyword': form.servKeyword.join(','),
            'servImg': form.servImg,
            'servAdd': form.servAdd,
            'servDataType': form.servDataType,
            'servEntityCreated': form.servEntityCreated,
            'servEntityDestroy': form.servEntityDestroy,
            'servDataCreated': form.servDataCreated,
            'servDataUpdate': form.servDataUpdate,
            'servDataUrl': this.form.upload_sd.fileName,
            'servRange': form.servRange,
            'servLimit': form.servLimit,
            'roleIdList': form.roleIdList,
            'servSpecial': form.servSpecial,
            'servCoordinate': form.servCoordinate,
            'servRatio': form.servRatio,
            'servAltitude': form.servAltitude,
            'servPlan': form.servPlan,
            'servEdition': form.servEdition,
            'servApi': form.servApi,
            'iconUrl': form.iconUrl
          }
        }).then(data => {
          if (data && data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.cancel()
              }
            })
          } else {
            this.submitStatus = false;
            this.$message.error(data.msg)
          }
        })
      })
    },
    findCatalogue() {
      catalogueByParentIdService(0).then(res => {
        if (res.status) {
          this.form.catalogueData = res.data;
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleClickBasic(tab, event) {
      let index = tab.index
      if (index === '1') {
        let tab = {"index": "0"}
        this.handleClick(tab)
      }
    },
    handleClick(tab, event) {
      let index = tab.index
      if (index === '0') {
        this.form.servAdd = '1'
        this.loadMap_1()
      }
      // if (index === '1') {
      //   this.form.servAdd = '2'
      //   this.loadMap_2()
      // }
    },
    /**
     * 取消添加/修改
     */
    cancel() {
      this.$router.go(-1)
    },
    /**
     * 添加关键词显示文本框
     */
    showInput() {
      this.form.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs['saveTagInput'].$refs.input.focus();
      });
    },
    /**
     * 删除关键词
     * @param tag
     */
    handleClose(tag) {
      this.form.servKeyword.splice(this.form.servKeyword.indexOf(tag), 1);
    },
    /**
     * 添加关键词
     */
    handleInputConfirm() {
      let inputValue = this.form.inputValue;
      if (inputValue) {
        this.form.servKeyword.push(inputValue);
      }
      this.form.inputVisible = false;
      this.form.inputValue = '';
    },
    // 上传之前
    beforeUploadHandle_sd(file) {

    },
    // 上传成功
    successHandle_sd(response, file, fileList) {
      this.form.upload_sd.fileList = fileList
      if (response && response.code === 200) {
        this.form.servDataUrl = response.data.downLoadPath
        this.form.upload_sd.downLoadPath = response.data.downLoadPath
        this.form.upload_sd.fileName = response.data.fileName
        this.form.upload_sd.savePath = response.data.savePath
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      } else {
        this.$message.error(response.msg)
      }
    },
    // 上传之前
    beforeUploadHandle_img(file) {
      // if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
      //   this.$message.error('只支持jpg、png、gif格式的图片！')
      //   return false
      // }
      // this.form.num++
    },
    // 上传成功
    successHandle_img(response, file, fileList) {
      this.form.upload_img.fileList = fileList
      if (response && response.code === 200) {
        this.form.servImg = response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    // 上传之前
    beforeUploadHandle_wd(file) {
      // if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
      //   this.$message.error('只支持jpg、png、gif格式的图片！')
      //   return false
      // }
      // this.form.num++
    },
    // 上传成功
    successHandle_wd(response, file, fileList) {
      this.form.upload_wd.fileList = fileList
      if (response && response.code === 200) {
        this.form.servApi = response.data
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      } else {
        this.$message.error(response.msg)
      }
    },
    // 上传之前
    beforeUploadHandle_zj(file) {
      // if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
      //   this.$message.error('只支持jpg、png、gif格式的图片！')
      //   return false
      // }
      // this.form.num++
    },
    // 上传成功
    successHandle_zj(response, file, fileList) {
      this.form.upload_zj.fileList = fileList
      if (response && response.code === 200) {
        this.form.servDataUrl = response.data.downLoadPath
        this.form.upload_sd.downLoadPath = response.data.downLoadPath
        this.form.upload_sd.fileName = response.data.fileName
        this.form.upload_sd.savePath = response.data.savePath
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      } else {
        this.$message.error(response.msg)
      }
    },
    submitUpload_sd() {
      if ('' === this.form.servDataType) {
        this.$message.error('请选择数据类型');
      } else {
        this.$refs.upload_sd.submit();
      }
    },
    submitUpload_zj() {
      this.$refs.upload_zj.submit();
    },
    submitUpload_wd() {
      this.$refs.upload_wd.submit();
    },
    handlePreview(file) {
      let url = file.response.data
      window.open(url)
    },
    handleChangeTc(value) {
      this.form.servCoverage = value[1]
    },
    //更改可见方式
    visibleWayChange(value) {
      this.form.roleIdList = []
      let roleNameArray = []
      if (value === '1') {
        roleList('', true).then((res) => {
          res.data.forEach((item, index) => {
            this.form.roleIdList.push(item.id)
            roleNameArray.push(item.roleName)
            this.form.roleNameList = roleNameArray.join(",")
          })
        })
      }
      if (value === '2') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init()
        })
      }
      if (value === '3') {
        this.form.roleNameList = ''
      }
    },
    setVisibleRange(roleNameStr, roleIdList) {
      this.form.roleNameList = roleNameStr
      this.form.roleIdList = roleIdList
    },
    confirmRelease() {
      $axios({
        url: '/data/dataService/confirmRelease',
        method: 'POST',
        params: {
          "downLoadPath": this.form.upload_sd.downLoadPath,
          "fileName": this.form.upload_sd.fileName,
          "savePath": this.form.upload_sd.savePath
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
      }).then(data => {
        if (data && data.code === 200) {
          this.$message({
            message: '发布成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              // this.getDataList()
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    webGlobe_1() {
      // let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
      //   url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=e43ffa1ac324bb264615baf8882f0c16",
      //   layer: "img",
      //   style: "default",
      //   format: "tiles",
      //   tileMatrixSetID: "w",
      //   maximumLevel: 18,
      // });
      if (null != viewer_1) {
        return;
      }

      viewer_1 = new Cesium.Viewer("cesiumDiv_1", {
        // imageryProvider: imageryProvider,
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode //2D 3D转换
        skyBox: new Cesium.SkyBox({
          // 自定义天空盒
          sources: {
            positiveX: "./Cesium/skybox/starmap_2020_16k_px.jpg",
            negativeX: "./Cesium/skybox/starmap_2020_16k_mx.jpg",
            positiveY: "./Cesium/skybox/starmap_2020_16k_py.jpg",
            negativeY: "./Cesium/skybox/starmap_2020_16k_my.jpg",
            positiveZ: "./Cesium/skybox/starmap_2020_16k_pz.jpg",
            negativeZ: "./Cesium/skybox/starmap_2020_16k_mz.jpg",
          },
        }),
      });

      // 文字无遮挡
      // that.viewer.scene.globe.depthTestAgainstTerrain = false;
      viewer_1.cesiumWidget.creditContainer.style.display = "none";

      this.setView_1();
    },
    yulan() {
      // 加载WMS
      let providerWMS = new Cesium.WebMapServiceImageryProvider({
        url: this.$mapUrl + '/earthview/rest/services/vectorserver/wms',
        layers: this.form.upload_sd.fileName,
        parameters: {
          serviceName: this.form.upload_sd.fileName,
          transparent: true,
          FORMAT: 'image/png',
          VERSION: '1.0',
          styles: '',
          SRS: 'EPSG:4326',
          TILED: true
        }
      });
      let image = new Cesium.ImageryLayer(providerWMS);
      viewer_1.imageryLayers.add(image);
    },
    setView_1() {
      viewer_1.scene.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(114.207, 36.401, 50000),
        duration: 0
      });
    },
    webGlobe_2() {
      if (null != viewer_2) {
        return;
      }
      viewer_2 = new Cesium.Viewer("cesiumDiv_2", {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode //2D 3D转换
        skyBox: new Cesium.SkyBox({
          // 自定义天空盒
          sources: {
            positiveX: "./Cesium/skybox/starmap_2020_16k_px.jpg",
            negativeX: "./Cesium/skybox/starmap_2020_16k_mx.jpg",
            positiveY: "./Cesium/skybox/starmap_2020_16k_py.jpg",
            negativeY: "./Cesium/skybox/starmap_2020_16k_my.jpg",
            positiveZ: "./Cesium/skybox/starmap_2020_16k_pz.jpg",
            negativeZ: "./Cesium/skybox/starmap_2020_16k_mz.jpg",
          },
        }),
      });

      // 文字无遮挡
      // that.viewer.scene.globe.depthTestAgainstTerrain = false;
      viewer_2.cesiumWidget.creditContainer.style.display = "none";

      // 加载WMS
      let providerWMS = new Cesium.WebMapServiceImageryProvider({
        url: this.$mapUrl + '/earthview/rest/services/vectorserver/wms',
        layers: "area_xq",
        parameters: {
          serviceName: "area_xq",
          transparent: true,
          FORMAT: 'image/png',
          VERSION: '1.0',
          styles: '',
          SRS: 'EPSG:4326',
          // MAP_KEY:'be9a5db1671a659738216ed9f1d255fa',
          TILED: true
        }
      });
      let image = new Cesium.ImageryLayer(providerWMS);
      viewer_2.imageryLayers.add(image);
      this.setView_2();
    },
    setView_2() {
      viewer_2.scene.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(114.207, 36.401, 2500),
        duration: 0,
        orientation: {
          heading: 0,
          pitch: -1,
          roll: 0,
        },
        complete: function callback() {
        },
      });
    },
    loadMap_1() {
      setTimeout(() => {
        this.webGlobe_1()
      }, 10)
    },
    loadMap_2() {
      setTimeout(() => {
        this.webGlobe_2()
      }, 10)
    },
  },
  beforeRouteLeave(to, from, next) {
    /**
     * {离开路由销毁 viewer}
     *
     * @author: 宋康
     * @date: 2022/10/10 17:16
     */
    if (null != viewer_1) {
      viewer_1.destroy();
      viewer_1 = null;
    }
    if (null != viewer_2) {
      viewer_2.destroy();
      viewer_2 = null;
    }
    next();
  }
}
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

img {
  border: 2px solid #8f8e8e
}

.el-form {
  .el-form-item {
    .el-input {
      width: 400px;
    }

    .el-select {
      width: 400px;
    }

    .el-textarea {
      width: 400px;
    }
  }
}

.avatar-uploader {
  :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409EFF;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}

.show-svg-icon {
  .icon {
    height: 70px;
    color: #333;
  }

  .svg-icon {
    width: 70px;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
